/**
*------------------------------------------
    Couleurs utilisées pour ce site :

    Vert ---> color : #74BA42;
                rgba(253, 139, 6, 0.4);

    Bleu ---> color : #3C69A3;
                rgba(60, 105, 163, 0.4);

    Noir -----> color : #474747;
                rgba(63, 52, 98, 0.4);
*------------------------------------------*/



body{
    margin: 0;
    padding: 0;
    font-family: Poppins, Roboto, sans-serif;
}



#servicesView.container-fluid{
    position: relative;
    margin: 0;
    padding: 0;

    position: relative;
    width: 100%;
    background-color: rgb(255, 255, 255);
}
#servicesView.container-fluid > .row{
    margin: 0;
    padding: 0;
}











/****************************  service -- consultation  *********/
#servicesView.container-fluid .titre{
    position: relative;
    width: 100%;
    height: 300px;
    background: url('../images/bg_infos.PNG');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    
    display: flex;
    justify-content: center;
    align-items: center;
}
#servicesView.container-fluid .titre::before{
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    opacity: 0.9;
    background-color: #3c5a7e;
}
#servicesView.container-fluid .titre h2{
    position: relative;
    width: 70%;
    margin: auto;
    font-size: 45px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}

/******
***
** /******************** infos du services  ***************
**/
#servicesView.container-fluid .service-one{ 
    position: relative;
    width: 100%;
    margin-bottom: 25px;
    margin-top: 25px;
}
#servicesView.container-fluid .service-one .col-image{
    position: relative;
    width: 100%;
    height: auto;
    background-color: #3C69A3;
}
#servicesView.container-fluid .service-one .col-texte{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 194, 143, 1);
    padding: 70px;
}
#servicesView.container-fluid .service-one .col-texte h2{
    position: relative;
    font-size: 35px;
    font-weight: 600;
    color: #3C69A3;
    text-align: center;
}
#servicesView.container-fluid .service-one .col-texte p.trait{
    position: relative;
    display: block;
    content: "";
    width: 200px;
    height: 3px;
    background-color: #3C69A3;
    margin-top: 8px;
    margin-bottom: 30px;
}
#servicesView.container-fluid .service-one .col-texte p{
    position: relative;
    font-size: 18px;
    font-weight: 550;
    color: #333;
    text-align: justify;
}

#servicesView.container-fluid .images-services{
    position: relative;
    background-color: rgb(15, 66, 124);
    padding: 0;
}
#servicesView.container-fluid .images-services a{
    cursor: zoom-in;
}


/******
***
** /******************** infos du services  ***************
**/
#servicesView.container-fluid .service-items{ 
    position: relative;
    width: 100%;
    /* border: 1px solid red; */

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
#servicesView.container-fluid .service-items{ 
    position: relative;
    width: 100%;
    /* border: 1px solid red; */

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
#servicesView.container-fluid .service-items .item{ 
    position: relative;
    width: 33%;
    height: 400px;
    overflow: hidden;

    margin-bottom: 10px;
    cursor: zoom-in;
}
#servicesView.container-fluid .service-items .item a{ 
    position: relative;
    width: 100%;
    cursor: zoom-in;
}
#servicesView.container-fluid .service-items .item a::after{ 
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    opacity: 1;
}
#servicesView.container-fluid .service-items .item a img{
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-position: top left; */
}




/*** **** **** ******** *** *** **** *** *** *** ****       --------------------        ***/
/*** **** **** ******** *** *** **** *** *** *** ****       --------------------        ***/
/*** **** **** ******** *** *** **** *** *** *** ****       La partie responsive        ***/

@media (min-width: 1400px){ /** grands écrans - au délà  */
    
}
@media (max-width: 1700px) {
    
}
@media (max-width: 1500px) {
    
    

}

@media (max-width: 1400px) {
    
    

}

@media (max-width: 1350px) {
    
}


@media (max-width: 1200px){ /** grands écran ou pc -- col-lg      Vert-foncé    */

    #servicesView.container-fluid .titre{
        position: relative;
        /* border: 1px solid red; */
    }
    #servicesView.container-fluid .titre h2{
        position: relative;
        width: 90%;
        font-size: 35px;
    }

}
@media (max-width: 992px){ /** grands écran ou pc -- col-lg      Vert-foncé    */

    #servicesView.container-fluid .titre{
        position: relative;
        width: 100%;
        height: 220px;
    }
    #servicesView.container-fluid .titre h2{
        position: relative;
        width: 90%;
        font-size: 30px;
    }


    
    #servicesView.container-fluid .service-one{ 
        position: relative;
        width: 100%;
        margin-bottom: 25px;
        margin-top: 25px;
        /* border: 1px solid blue; */
        padding: 15px;
    }



    #servicesView.container-fluid .service-items{ 
        position: relative;
        width: 100%;
        padding: 15px;
    }
    #servicesView.container-fluid .service-items .item{ 
        position: relative;
        width: 33%;
        height: 300px;
    }

}
@media (max-width: 768px){ 
    #servicesView.container-fluid .service-one .col-texte{

        /* border: 1px solid red; */
        padding: 20px;
    }
    #servicesView.container-fluid .titre h2{
        font-size: 22px;
    }

}

@media (max-width: 599px){

    #servicesView.container-fluid .service-items .item{ 
        position: relative;
        width: 49%;
        height: 200px;
    }
    
}
@media (max-width: 490px){
    #servicesView.container-fluid .service-one .col-texte h2{
        position: relative;
        font-size: 25px;
        /* color: red; */

        /* border: 1px solid red; */
    }
    #servicesView.container-fluid .service-one .col-texte p.trait{
        position: relative;
        display: block;
        content: "";
        width: 200px;
        height: 3px;
        background-color: #3C69A3;
        margin-top: 8px;
        margin-bottom: 30px;
    }
    
    
}

@media (max-width: 395px){ /** très petits écrans ***/


}